<template>
  <div>
    <a-row :gutter="[48]">
      <a-col :span="8">
        <div id="liquidFill" style="width:100%; height:150px;"></div>
      </a-col>
      <a-col :span="8">
        <div class="ant-card-body1">
          <div class="caiG1">
            <p class="caiGou">加油量（L）</p>
            <h1 class="cgYoul">{{detail.inOilVolume}}</h1>
          </div>
          <p class="cgSale">
            加油总金额（元）
            <span>{{detail.inTotalAmount}}</span>
          </p>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="ant-card-body1">
          <div class="caiG2">
            <p class="caiGou">耗油量（L）</p>
            <h1 class="cgYoul">{{detail.outOilVolume}}</h1>
          </div>
          <p class="cgSale">
            耗油总金额（元）
            <span>{{detail.outTotalAmount}}</span>
          </p>
        </div>
      </a-col>
    </a-row>
    <a-form layout="inline" ref="searchForm" :model="searchForm" :style="'margin-top:60px;'">
      <div>
        <a-form-item label="记录类型" prop="inOrOut">
          <a-select v-model="searchForm.inOrOut" @change="onChangeInOrOut" class="selectWidth">
            <a-select-option key>请选择</a-select-option>
            <a-select-option :key="1">加油</a-select-option>
            <a-select-option :key="2">耗油</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="业务类型" prop="invoiceNoLike">
          <a-select v-model="searchForm.businessType" class="selectWidth">
            <a-select-option key>请选择</a-select-option>
            <a-select-option v-for="v in Options" :key="v.key">{{v.title}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="日期" prop="date">
          <a-range-picker @change="cyDateChange" style="width: 250px" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="exportExcel">导出Excel</a-button>
        </a-form-item>
      </div>
    </a-form>
    <a-row>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :loading="loading"
          :data-source="tableData"
          :pagination="pagination"
          :scroll="{x: 1500}"
        >
          <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
          <template slot="number" slot-scope="text, record">
            <a
              v-if="text"
              :href="`/landCenter/orderDispatch/${record.truckOrderId}`"
              target="_blank"
            >{{text}}</a>
            <span v-if="!text">--</span>
          </template>
          <template slot="detail" slot-scope="text, record">
            <a @click="viewIt(record.inAndOutId)">{{text}}</a>
          </template>
        </a-table>
      </a-col>
    </a-row>

    <a-modal :visible="detailVisible" title="查看采购/加油批次" :footer="null" @cancel="closeDetail">
      <a-row>
        <a-col :span="24">
          <a-descriptions :column="2">
            <a-descriptions-item label="里程数(km)">{{detailModal.mileage}}</a-descriptions-item>
            <a-descriptions-item label="耗油系数(L/km)">{{detailModal.rate}}</a-descriptions-item>
            <a-descriptions-item label="耗油量(L)">{{detailModal.oilVolume}}</a-descriptions-item>
            <a-descriptions-item label="油耗费用(元)">
              {{detailModal.totalAmount}}
              <a
                style="margin-left: 20px"
                @click="() => {detailClose = !detailClose}"
              >{{detailClose?'收起':'显示'}}价格明细</a>
            </a-descriptions-item>
            <a-descriptions :column="1">
              <a-col :span="24" v-show="detailClose">
                <a-table
                  size="small"
                  :columns="columns2"
                  :data-source="detailModal.detailList"
                  :pagination="false"
                  rowKey="detailId"
                ></a-table>
              </a-col>
            </a-descriptions>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echartsLiquidfill from 'echarts-liquidfill' // echarts水滴球
import { commonExport } from '@/api/request'
import { queryTractorOilStatistics, queryTractorOilInAndOutList, queryTruckOilInAndOutDetailByOut } from '@/api/landCenter'

const options = [
  {
    key: 'PURCHASE_OIL',
    title: '加油',
    t: 1 // 1加油入箱，2耗油出箱
  },
  {
    key: 'CARD_OIL',
    title: '加油卡加油',
    t: 1
  },
  {
    key: 'ORDER',
    title: '业务订单',
    t: 2
  },
  {
    key: 'SHUNTING',
    title: '业务调车',
    t: 2
  },
  // {
  //   key: 'FUEL',
  //   title: '航线耗油',
  //   t: 2
  // },
  {
    key: 'REPAIR',
    title: '车辆维修',
    t: 2
  },
  {
    key: 'ANNUAL',
    title: '车辆年检',
    t: 2
  },
  {
    key: 'UPKEEP',
    title: '车辆保养',
    t: 2
  },
  {
    key: 'OTHER',
    title: '其它',
    t: 2
  }
]

export default {
  name: 'tractor-oil-use',
  props: ['truckId'],
  data () {
    const columns = [
      {
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      },
      {
        title: '类型',
        dataIndex: 'inOrOut',
        customRender: (text) => {
          return text === 1 ? '加油' : (text === 2 ? '耗油' : '--')
        },
        _needName: true
      },
      {
        title: '业务类型',
        dataIndex: 'businessType'
      },
      {
        title: '挂车',
        dataIndex: 'trailerNumber',
        customRender: (text) => {
          return text || '--'
        }
      },
      {
        title: '里程数(km)',
        dataIndex: 'mileage',
        customRender: (text) => {
          return text || '--'
        }
      },
      {
        title: '油量（L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '交易金额(元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '公司编号',
        dataIndex: 'truckOrderCode',
        scopedSlots: { customRender: 'number' }
      },
      {
        title: '日期',
        dataIndex: 'createTime'
      },
      {
        title: '耗油批次',
        dataIndex: 'batchNo',
        width: '160px',
        scopedSlots: { customRender: 'detail' }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: '180px',
        ellipsis: true
      }
    ]
    return {
      detail: {},
      Options: options,
      searchForm: {
        inOrOut: '', // 记录类型：1加油入箱，2耗油出箱
        businessType: '', // 业务类型（枚举）：PURCHASE_OIL(“加油”),CARD_OIL(“加油卡加油”), ORDER(“业务订单”),SHUNTING(“业务调车”), FUEL(“航线耗油”), REPAIR(“车辆维修”), ANNUAL(“车辆年检”), UPKEEP(“车辆保养”), OTHER(“其它”);
        time1: '', // 日期
        time2: '' // 日期
      },
      columns,
      loading: false,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // 详情modal
      detailClose: false,
      detailVisible: false,
      detailModal: {
        detailList: []
      },
      columns2: [{
        title: '采购/加油批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }]
    }
  },
  methods: {
    onChangeInOrOut (key) {
      this.searchForm.businessType = ''
      this.Options = options.filter(v => !key || v.t === key)
    },
    cyDateChange (d, dataStr) {
      this.searchForm.time1 = dataStr[0]
      this.searchForm.time2 = dataStr[1]
    },
    liquidFill (res) {
      let liquid = this.$echarts.init(
        document.getElementById('liquidFill')
      )
      let result = 0.5
      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 5, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 2 // 边框的宽度
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                return `当前油量(L)\n${res}`
              },
              fontSize: 14,
              color: '#666'
            }
          }
        ]
      })
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryTractorOilInAndOutList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    viewIt (inAndOutId) {
      this.detailVisible = true
      this.detailModal = { voucherPics: '' }
      queryTruckOilInAndOutDetailByOut({ inAndOutId, sType: 1 }).then(rsp => {
        this.detailModal = Object.assign({}, this.detailModal, rsp.data)
      })
    },
    closeDetail () {
      this.detailVisible = false
    },
    exportExcel () {
      commonExport('/truck/exportTractorOilInAndOutList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      queryTractorOilStatistics({ truckId: this.truckId }).then(rsp => {
        this.detail = rsp.data
        this.liquidFill(rsp.data.remainingOil)
      })
      this.searchForm.truckId = this.truckId
      this.handleSubmit()
    })
  }
}
</script>

<style scoped>
.ant-card-body1 {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
  padding: 24px 24px 16px 24px;
}
.caiG1 {
  background: url(../../../../static/images/ChuanbOil2.png) no-repeat right center;
}
.caiG2 {
  background: url(../../../../static/images/ChuanbOil1.png) no-repeat right center;
}
.ant-card-body1 .cgYoul {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  margin-bottom: 0;
}
.ant-card-body1 .caiGou {
  margin-bottom: 0;
  line-height: 16px;
}
.ant-card-body1 .cgSale {
  margin-bottom: 0;
  line-height: 16px;
  border-top: 1px #dbe3ff solid;
  padding-top: 16px;
}
.ant-card-body1 .cgSale span {
  float: right;
  font-size: 18px;
  font-weight: bold;
}
</style>
